<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{HOME_THEME_PATH}pc/css/global.css">
    <link rel="stylesheet" href="{HOME_THEME_PATH}/pc/css/case.css">

    <title>Document</title>
</head>
<body>
    <!-- 经典案例 -->
    <section id="cases" class="cases">
        <div class="container">
            <div class="section-header">
                <h2>经典案例</h2>
                <p class="section-subtitle">成功案例展示，见证我们的实力</p>
            </div>
            <div class="carousel-container">
                <div class="cases-carousel">
                    {module module=casus catid=8}
                    <div class="case-card">
                        <div class="case-image">
                            <img style="background-image: url('{dr_thumb($t.thumb)}')" alt="棉花全产业链大数据平台">
                        </div>
                        <div class="case-content">
                            <h3>{$t['title']} </h3>
                            <p>{$t['description']}</p>
                        </div>
                    </div>
                   {/module}
                </div>
                <div class="carousel-controls">
                    <button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
                    <div class="carousel-dots">
                        <span class="dot active"></span>
                        <span class="dot"></span>
                    </div>
                    <button class="next-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </section>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
            // 轮播功能
            const carousel = document.querySelector('.cases-carousel');
            const cards = carousel.querySelectorAll('.case-card');
            const prevBtn = document.querySelector('.prev-btn');
            const nextBtn = document.querySelector('.next-btn');
            const dots = document.querySelectorAll('.dot');
            
            let cardWidth = cards[0].offsetWidth + 20; // 计算卡片宽度（包括margin）
            let cardCount = cards.length;
            let cardsPerPage = window.innerWidth > 992 ? 3 : window.innerWidth > 768 ? 2 : 1;
            let currentPage = 0;
            let totalPages = Math.ceil(cardCount / cardsPerPage);
            
            // 更新轮播位置
            function updateCarousel() {
                carousel.style.transform = `translateX(-${currentPage * cardWidth * cardsPerPage}px)`;
                
                // 更新dot指示器
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentPage);
                });
            }
            
            // 更新轮播尺寸（响应式）
            function updateCarouselSize() {
                cardWidth = cards[0].offsetWidth + 20;
                cardsPerPage = window.innerWidth > 992 ? 3 : window.innerWidth > 768 ? 2 : 1;
                totalPages = Math.ceil(cardCount / cardsPerPage);
                
                // 确保当前页面在有效范围内
                if (currentPage >= totalPages) {
                    currentPage = totalPages - 1;
                }
                
                updateCarousel();
            }
            
            // 前一页
            prevBtn.addEventListener('click', function() {
                if (currentPage > 0) {
                    currentPage--;
                    updateCarousel();
                }
            });
            
            // 后一页
            nextBtn.addEventListener('click', function() {
                if (currentPage < totalPages - 1) {
                    currentPage++;
                    updateCarousel();
                }
            });
            
            // 点击指示器切换页面
            dots.forEach((dot, index) => {
                dot.addEventListener('click', function() {
                    currentPage = index;
                    updateCarousel();
                });
            });
            
            // 监听窗口大小变化
            window.addEventListener('resize', updateCarouselSize);
            
            // 初始化
            updateCarouselSize();
        });
</script>
</html>